<template>
    <div class="app-container">
        <!-- 欢迎信息 -->
        <h2>您好，欢迎登陆本系统</h2>
        <!-- 平台基本信息系统 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>平台基本信息</span>
            </div>
            <div class="card">
                <div class="cardItem">
                    <div class="cardItem-img icon-people">
                        <img src="../../assets/icon/yonghu42c9c6.png">
                    </div>
                    <div class="cardItem-num">
                        <div>用户数量</div>
                        <div><count-to :start-val="0" :end-val="userTotal" :duration="3600" class="card-panel-num"/></div>
                    </div>
                </div>
                <div class="cardItem">
                    <div class="cardItem-img icon-message">
                        <img src="../../assets/icon/shoucangfill-36a3f7.png">
                    </div>
                    <div class="cardItem-num">
                        <div>商品数量</div>
                        <div><count-to :start-val="0" :end-val="goodsToyal" :duration="3600" class="card-panel-num"/></div>
                    </div>
                </div>
                <div class="cardItem">
                    <div class="cardItem-img icon-text">
                        <img src="../../assets/icon/gouwuchefill-f5516c.png">
                    </div>
                    <div class="cardItem-num">
                        <div>货品数量</div>
                        <div><count-to :start-val="0" :end-val="productTotal" :duration="3600" class="card-panel-num"/></div>
                    </div>
                </div>
                <div class="cardItem">
                    <div class="cardItem-img icon-money">
                        <img src="../../assets/icon/renminbi-42c9c6.png">
                    </div>
                    <div class="cardItem-num">
                        <div>订单数量</div>
                        <div><count-to :start-val="0" :end-val="porderTotal" :duration="3600" class="card-panel-num"/></div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import {info} from '@/api/home/home'
import CountTo from 'vue-count-to';
export default {
    components:{
        CountTo
    },
    data(){
        return{
            userTotal:100,
            goodsToyal:200,
            productTotal:300,
            porderTotal:400
        }
    },
    computed:{
        CountTo
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            info().then(res=>{
                console.log(res);
                if(200==res.status){
                    this.userTotal=res.data.data.userTotal;
                    this.goodsTotal=res.data.data.goodsTotal;
                    this.productTotal=res.data.data.productTotal;
                    this.porderTotal=res.data.data.porderTotal;
                }
            })
        }
    }
}
</script>

<style rel="stylessheet/scss" lang="scss" scoped>
.card{
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cardItem{
    width: 23%;
    height: 108px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    color: #666;
    box-shadow: 4px 4px 40px rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.05);
    cursor: pointer;
    &:hover{
        .icon-people{
            background: #42c9c6;
            img{
                content: url('../../assets/icon/yonghu2.png');
            }
        }
        .icon-message{
            background: #36a3f7;
            img{
                content: url('../../assets/icon/shoucangfill.png');
            }
        }
        .icon-text{
            background: #f5516c;
            img{
                content: url('../../assets/icon/gouwuchefill.png');
            }
        }
        .icon-money{
            background: #42c9c6;
            img{
                content: url('../../assets/icon/renminbi.png');
            }
        }
    }
}
.cardItem-img{
    margin: 0 20px;
    border-radius: 10px;
    img{
        height: 54px;
        margin: 10px;
    }
}
.cardItem-num{
    margin: 0 20px;
    font-size: 16px;
}
.cardItem-num>div:nth-child(2){
    margin-top: 10px;
    font-weight: 800;
}
</style>
